<template>
  <div class="custom-container p-5">
  
    <div>
      <a-row :gutter="16">
        <a-col :span="24">
          <div class="box_tit">
            当前频谱
          </div>
          <div class="box_con char1" style="width:100%;height: 400px;">
            <div ref="chartRef" style="width: 100%;height: 380px;background-image: linear-gradient(#535353, #060606);border: 1px solid #fff;" ></div>
          </div>
        </a-col>
        <a-col :span="24" style="margin-top: 30px;">
          <div style="display: flex;justify-content: space-between;align-items: center">
  
            <div style="margin-left: 15px; color:#fff">
              每页显示
              <a-select ref="select" v-model:value="select1" style="width: 85px;margin-bottom: 5px;" :placeholder="''"
                allowClearget_mset>
                <a-select-option :value="item.value" v-for="item in typeOptions" :key="item.label">{{
                  item.value
                  }}</a-select-option>
              </a-select>
              条记录
            </div>
            <div style="display: flex;align-items: center;">
              <p style="width: 50px; margin-bottom: 0; color:#fff">搜索:</p>
              <a-input />
            </div>
          </div>
          <div class="box_con char1" style="width:100%;height: 400px;">
            <a-table :columns="columns" :data-source="dataList" :pagination="{}" @change="">
            </a-table>
          </div>
        </a-col>
  
      </a-row>
    </div>
  
  </div>
</template>
  <script lang="ts">
import { useAppStore } from '/@/store/modules/app.ts';
import { defineComponent, onMounted, onBeforeUnmount, reactive, ref, Ref, watch } from 'vue';
import { set_chn_switch } from "/@/api/biz/index";
import charts from './charts.vue';
import { Icon } from '/@/components/Icon';
import { Tag, Card } from 'ant-design-vue';
import { useRoute } from 'vue-router';
import { defHttp } from '/@/utils/http/axios';
//import { ExclamationCircleOutlined, PoweroffOutlined, StarTwoTone } from '@ant-design/icons-vue';
import {
  ExpandAltOutlined,
  ExpandOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
  FormOutlined,
} from '@ant-design/icons-vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { message } from 'ant-design-vue';
import { useGo } from '/@/hooks/web/usePage';
import { useECharts } from '/@/hooks/web/useECharts';
import { get_chars } from '/@/api/biz/echarts';

export default defineComponent({
  components: {
    //charts,
    ExpandAltOutlined,
    FormOutlined,
    ExpandOutlined,
    FullscreenOutlined,
    FullscreenExitOutlined,
    Icon,
  },
  setup() {
    const appStore = useAppStore();
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions, resize, echarts, getInstance } = useECharts(
      chartRef as Ref<HTMLDivElement>,
    );
    const nodata1 = true;
    const data = [
      ['3630.00', 100],
      ['3656.88', 102],
      ['3683.76', 105],
      ['3710.64', 109],
      ['3737.52', 113],
      ['3764.40', 114],
      ['3791.28', 117],
      ['3818.16', 119],
      ['3845.04', 121],
      ['3871.92', 124],
      ['3898.80', 114],
      ['3925.68', 112],
      ['3952.56', 123],
      ['3979.44', 125],
      ['4006.32', 127],
      ['4033.20', 129],
      ['4060.08', 110],
      ['4087.96', 111],
      ['4114.84', 120],
      ['4141.72', 125],
      ['4168.60', 130],
      // ['1000000', -70],
      // ['1010000', -51],
      // ['1020000', -117],
      // ['1030000', -46],
      // ['1040000', -98],
      // ['1050000', -56],
      // ['1060000', -56],
      // ['1070000', -52],
      // ['1080000', -58],
      // ['1090000', -49],
      // ['1100000', -118],
      // ['1110000', -112],
      // ['1120000', -42],
      // ['1130000', -43],
      // ['1140000', -37],
      // ['1150000', -53],
      // ['1160000', -12],
      // ['1170000', -127],
      // ['1180000', -62],
      // ['1190000', -23],
      // ['1200000', -59],
      // ['1210000', -118],
      // ['1220000', -60],
      // ['1230000', -116],
      // ['1240000', -19],
      // ['1250000', -33],
      // ['1260000', -20],
      // ['1270000', -20],
      // ['1280000', -125],
      // ['1290000', -41],
      // ['1300000', -106],
      // ['1310000', -34],
      // ['1320000', -106],
      // ['1330000', -130],
      // ['1340000', -86],
      // ['1350000', -104],
      // ['1360000', -91],
      // ['1370000', -32],
      // ['1380000', -13],
      // ['1390000', -117],
      // ['1400000', -59],
      // ['1410000', -81],
      // ['1420000', -35],
      // ['1430000', -17],
      // ['1440000', -41],
      // ['1450000', -25],
      // ['1460000', -103],
      // ['1470000', -98],
      // ['1480000', -116],
      // ['1490000', -83],
      // ['1500000', -32],
      // ['1510000', -37],
      // ['1520000', -71],
      // ['1530000', -113],
      // ['1540000', -64],
      // ['1550000', -24],
      // ['1560000', -88],
      // ['1570000', -14],
      // ['1580000', -119],
      // ['1590000', -103],
      // ['1600000', -85],
      // ['1610000', -10],
      // ['1620000', -94],
      // ['1630000', -125],
      // ['1640000', -123],
      // ['1650000', -51],
      // ['1660000', -40],
      // ['1670000', -68],
      // ['1680000', -43],
      // ['1690000', -80],
      // ['1700000', -100],
      // ['1710000', -129],
      // ['1720000', -89],
      // ['1730000', -80],
      // ['1740000', -66],
      // ['1750000', -63],
      // ['1760000', -54],
      // ['1770000', -46],
      // ['1780000', -39],
      // ['1790000', -10],
      // ['1800000', -37],
      // ['1810000', -22],
      // ['1820000', -75],
      // ['1830000', -11],
      // ['1840000', -115],
      // ['1850000', -35],
      // ['1860000', -56],
      // ['1870000', -23],
      // ['1880000', -61],
      // ['1890000', -91],
      // ['1900000', -115],
      // ['1910000', -102],
      // ['1920000', -115],
      // ['1930000', -54],
      // ['1940000', -71],
      // ['1950000', -72],
      // ['1960000', -91],
      // ['1970000', -118],
      // ['1980000', -18],
      // ['1990000', -22],
      // ['2000000', -56],
      // ['2010000', -97],
      // ['2020000', -48],
      // ['2030000', -74],
      // ['2040000', -55],
      // ['2050000', -53],
      // ['2060000', -78],
      // ['2070000', -26],
      // ['2080000', -88],
      // ['2090000', -115],
      // ['2100000', -115],
      // ['2110000', -51],
      // ['2120000', -97],
      // ['2130000', -23],
      // ['2140000', -54],
    ];
    const dateList = data.map(function (item) {
      return item[0];
    });
    const valueList = data.map(function (item) {
      return item[1];
    });
    const valueList2 = valueList.map(value => value - 10);  
    let select1 = ref();
    const typeOptions = ref([
      {
        value: '1',
        label: 'M710a',
      },
      {
        value: '2',
        label: 'M650',
      },
      {
        value: '3',
        label: 'M650',
      },
    ]);
    onMounted(() => {
      set_chn_switch({ ip: '2' }).then((res) => {
        console.log(213123)
      })
      defHttp.get({ url: '/api/term', params: '' }).then((res) => {
        console.log(res.data.data.result.data.SELECT.rfin.select, 'res.data.data.result.data.SELECT.rfin.select')
        typeOptions.value = res.data.data.result.data.SELECT.rfin.select
        console.log(typeOptions.value, 'typeOptions')
      });
    });

    onMounted(() => {
      do_get_chars();
    });
    const columns = [
      {
        title: '时间',
        dataIndex: 'name1',
        sorter: true,
      },
      {
        title: '中心速率',
        dataIndex: 'name2',
      },
      {
        title: '符号速率',
        dataIndex: 'name3',
      },
      {
        title: '调制类型',
        dataIndex: 'name4',
        sorter: true,
      },
      {
        title: 'CNR',
        dataIndex: 'name5',
      },
      {
        title: '详情',
        dataIndex: 'name6',
      },
    ];
    const dataList = reactive([
      {
        name1: '2023-06-20', //时间
        name2: '3822.061', //中心速率
        name3: '2880.727', //符号速率
        name4: '16QAM', //调制类型
        name5: '15.62', //CNR
        name6: '点击查看', //详情
      },
      {
        name1: '2023-06-20', //时间
        name2: '3825.588', //中心速率
        name3: '2529.144', //符号速率
        name4: '16QAM', //调制类型
        name5: '14.877', //CNR
        name6: '点击查看', //详情
      },
      {
        name1: '2023-06-20', //时间
        name2: '3831.916', //中心速率
        name3: '43.756', //符号速率
        name4: 'QPSK、16QAM、32QAM、UNKNOWN', //调制类型
        name5: '13.288', //CNR
        name6: '点击查看', //详情
      },
      {
        name1: '2023-06-20', //时间
        name2: '3837.822', //中心速率
        name3: '43.756', //符号速率
        name4: 'QPSK、16QAM、32QAM、UNKNOWN', //调制类型
        name5: '12.159', //CNR
        name6: '点击查看', //详情
      },
      {
        name1: '2023-06-20', //时间
        name2: '3852.23', //中心速率
        name3: '4105.482', //符号速率
        name4: 'QPSK、16QAM、32QAM、UNKNOWN', //调制类型
        name5: '18.086', //CNR
        name6: '点击查看', //详情
      },
    ]);
    function do_get_chars() {
      setOptions({
        // Make gradient line here
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400,
          },
          {
            show: false,
            type: 'continuous',
            seriesIndex: 1,
            dimension: 0,
            min: 0,
            max: dateList.length - 1,
          },
        ],
        title: [],
        tooltip: {
          trigger: 'axis',

        },
        dataZoom: [
          {
            startValue: '1820000',
          },
          {
            type: 'inside',
          },
        ],
        xAxis: [
          {
            // 传数据
            data: dateList,
            axisLabel:{
              // interval:0
            }
          },
        ],
        yAxis: [{}],
        grid: {
          left: '5%',
          right: '2%',
          bottom: '20%',
        },
        series: [
          {
            type: 'line',
            showSymbol: false,
            // 传数据
            data: valueList,
            // itemStyle: {
            //   color: 'red',  // 修改折线颜色为红色
            // },
            lineStyle: {
              color: 'red',  // 修改折线颜色为红色
            },
          },
          {
            type: 'line',
            showSymbol: false,
            // 传数据
            data: valueList2,
            // itemStyle: {
            //   color: 'red',  // 修改折线颜色为红色
            // },
            lineStyle: {
              color: 'blue',  // 修改折线颜色为红色
            },
          },
        ],
      });
    }
    const datax1 = reactive({
      //作为初始和保存用户操作后的范围
      start: 0,
      end: 100,
      //dataZoom的配置，这里我只取了关键点，每个项目配置不一样
      dataZoom: [
        {
          //设定初始范围
          show: true,
          realtime: true,
          backgroundColor: 'rgba(47,69,84,0)',
          start: 0,
          end: 100,
          xAxisIndex: [0, 1],
        },
        {
          type: 'inside',
          realtime: true,
          start: 30,
          end: 70,
          xAxisIndex: [0, 1],
        },
      ],
    });


    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      do_get_chars,
      chartRef,
      nodata1,
      columns,
      dataList,
      select1,
      typeOptions,
    };
  },
});
  </script>
  
  <style lang="less" scoped>
.custom-container {
    //background: #fff !important;
  }
  
  .spane1 {
    color: #0960bd;
    cursor: pointer;
  }
  
  .list1 {
    padding: 20px 0;
  }
  
  .content1 {
    padding: 15px 0;
    text-indent: 24px;
  }
  
  .hh1 {
    line-height: 34px;
    text-align: center;
    font-weight: bold;
  }
  
  .dd1 {
    line-height: 34px;
  }
  
  .dd2 {
    line-height: 34px;
    text-indent: 24px;
  }
  
  .dd3 {
    line-height: 34px;
    text-indent: 24px;
    float: right;
    margin: 20px 0;
  }
  
  .coll1 {
    margin-bottom: 50px;
  }
  
  .menu_list {
    display: flex;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
    flex-wrap: wrap;
  }
  
  .menu_list_item {
    margin: 0;
    width: 200px;
    height: 80px;
    padding: 5px 0;
    //border-radius: 10px;
    text-align: center;
    //border: 5px solid #87e8de;
    color: #08979c;
    background-image: linear-gradient(#4b4b4b, #323232);
    margin-right: 15px;
    position: relative;
    margin-top: 10px;
  }
  
  /*
        .menu_list_item{
          margin: 0 20px;
          width: 120px;
          height: 120px;
          padding: 30px 0;
          border-radius: 100%;
          text-align: center;
          border: 5px solid #87e8de;
          color: #08979c;
          background: #e6fffb;
        }*/
  .menu_list_item.iscked {
    color: #096dd9;
    //background: #e6f7ff;
    //border-color: #91d5ff;
    border: 1px solid #096dd9;
  }
  
  .menu_list_item.iscked .pa1 {
    color: #fff;
  }
  
  .box_tit {
    position: relative;
    // padding: 12px 16px;
    padding-left: 40px;
    color: #fff;
    line-height: 22px;
    cursor: pointer;
    transition: all 0.3s;
    box-sizing: border-box;
    margin-bottom: -30px;
    z-index: 10;
    // border-radius: 0 0 2px 2px;
    // border: 1px solid #d9d9d9;
    // background: #222222;
  }
  
  .box_con {
    overflow: hidden;
    color: #fff;
    // background-color: #444;
    box-sizing: border-box;
    border-radius: 0 0 2px 2px;
    // border: 1px solid #d9d9d9;
    border-top: 0;
  }
  
  .font1 {
    position: relative;
    top: 2px;
  }
  
  .icon2 {
    padding-top: 10px;
    margin-left: 20px;
  }
  
  .pa1 {
    color: #fff;
    font-size: 16px;
    margin: 0;
    margin-top: 10px;
    line-height: 30px;
    font-weight: bold;
  }
  
  .pa2 {
    font-size: 12px;
    color: #93d2fb;
    margin: 0;
    line-height: 20px;
  }
  
  .pa3 {
    position: absolute;
    right: 10px;
    top: 0;
    color: red;
    font-weight: bold;
    cursor: pointer;
  }
  
  .notice1 {
    width: 100%;
    padding-top: 150px;
    text-align: center;
    color: #fff;
    font-size: 16px;
  }
  
  .spanf1 {
    color: #05e618;
  }
  
  .char1 {
    // background-image: linear-gradient(#535353, #060606);
  }
  
  .spanaa1 {
    margin-left: 25px;
  }
  
  .tablea1 {
    padding: 20px;
    padding-top: 0;
  }
  
  .buttona1 {
    position: absolute;
    z-index: 22;
    right: 10px;
    top: 10px;
    font-size: 24px;
    font-weight: bold;
    color: rgb(82, 196, 26);
  }
  
  .boxe1 {
    margin-top: 30px;
  }
  
  .ant-input {
    color: #fff;
  }
  
  .anticon-close-circle {
    background: #fff;
  }
  
  .ant-select-clear {
    background: #3b3d3e;
    color: #fff;
  }
</style>
  <style>
  .ant-spin-nested-loading{
    border: 1px solid #fff;
  }
/* .moreset {
      float: right;
    }
    
    .moreset span {
      color: #93d2fb;
    }
    
    .ant-select .ant-select-selection-item {
      color: #fff;
    }
    
    .ant-form-item-control-input-content {
      color: #fff;
    }
    
    .ant-progress-line {
      width: 70%;
    }
    
    .ant-modal-body {
      background: #444;
    }
    
    .ant-progress-text {
      color: #fff;
    }
    
    .ant-table-placeholder {
      background: #444;
      color: #fff;
    }
    
    .ant-empty-normal {
      color: #fff;
    }
    
    .ant-table-body {
      background: #fff;
      color: #000;
    } */
  
  /* .ant-select:not(.ant-select-customize-input) .ant-select-selector {
          background: pink !important;
      } */
  /* .ant-select-selection-item {
      color: #000 !important;
    }
    
    .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
      color: #000 !important;
    }
    
    .a-select-arrow {
      color: black !important;
    }
    
    .ant-select-arrow {
      color: #ccc;
    } */
</style>
  